import { View, Text, Modal, TextInput, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";

type Props = {
  visible: boolean;
  onClose?: () => void;
  onSubmit?: (message: string) => void;
  title?: string;
  tip?: string;
  desc?: string;
};

export default function ModalInputPack(props: Props) {
  const { visible, title="请输入", tip,desc="系统会对您输入的信息保密", onClose, onSubmit } = props;

  const [message, setMessage] = useState("");

  return (
    <Modal
      visible={visible}
      onRequestClose={() => {}}
      presentationStyle={"overFullScreen"}
      transparent={true}
      animationType="fade"
    >
      <View style={styles.container}>
        <View style={styles.box}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.desc}>{desc}</Text>
          <View style={styles.content}>
            <TextInput
              style={styles.contentInput}
              placeholderTextColor="#999"
              value={message}
              keyboardType="numeric"
              onChangeText={(text) => {
                setMessage(text);
              }}
            />
            <Text style={styles.contentText}>{tip}</Text>
          </View>
          <Text
            style={styles.submit}
            suppressHighlighting={true}
            onPress={() => {
              onSubmit && onSubmit(message);
            //   onClose && onClose();
              setMessage("");
            }}
          >
            保存
          </Text>
          <Text
            style={styles.cancel}
            suppressHighlighting={true}
            onPress={() => {
              onClose && onClose();
              setMessage("");
            }}
          >
            取消
          </Text>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.75)",
  },
  box: {
    width: 300,
    backgroundColor: "#fff",
    borderRadius: 14,
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
    paddingLeft: 30,
    paddingRight: 30,
  },
  title: {
    paddingTop: 20,
    paddingBottom: 14,
    fontSize: 20,
    color: "#000",
  },
  desc: {
    fontSize: 12,
    color: "#333",
    // paddingBottom: 20,
  },
  content: {
    flexDirection: "row",
    // justifyContent: "space-between",
    alignItems: "center",
    paddingTop: 30,
    paddingBottom: 10,
  },
  contentInput: {
    width: '25%',
    borderBottomWidth: 1,
    borderColor: "#ccc",
    borderRadius: 5,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight: 4,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "bold",
    color: "#666",
  },
  contentText: {
    fontSize: 16,
    color: "#333",
  },
  submit: {
    width: "100%",
    backgroundColor: "#38d9a9",
    fontSize: 18,
    lineHeight: 50,
    borderRadius: 25,
    overflow: "hidden",
    textAlign: "center",
    color: "#fff",
    marginTop: 20,
    marginBottom: 10,
  },
  cancel: {
    color: "#999",
    fontSize: 14,
    // paddingTop: 10,
    paddingBottom: 8,
  },
});
